<template>
  <div class="contaienr">
    <OrderHeader title="我的购物车">
      <template v-slot:tip>
        <span>温馨提示：产品是否购买成功，以最终下单伪准哦，请尽快结算</span>
      </template>
    </OrderHeader>
    <!-- 内容 -->
    <div class="wrapper">
        <div class="wrapepr_header"> 
          <ul>
            <li class="col-1">
              <span class="checkBox" :class="{checked:isSelectAll}" @click="isAll(isSelectAll)"></span>
              全选 
            </li> 
            <li class="col-3">商品名称</li>
            <li class="col-1">单价</li>
            <li class="col-2">数量</li>
            <li class="col-1">小计</li>
            <li class="col-1">操作</li>
          </ul>
        </div>
        <div class="wrapper_container">
          <div v-if="list.length > 0">
            <ul v-for="(item,index) in list" :key="index">
            <li class="col-1">
              <span class="checkBox" :class="{checked:item.isCheck}" @click="changeCheck(item,index)"></span>  
            </li> 
            <li class="col-3 phone_name">
              <span class="phone">
                <img :src="item.s_good.s_photos[0].path" alt="">
              </span>   
              <span>
                {{item.s_good.name}}
              </span>
            </li>
            <li class="col-1">
              <span>{{item.s_good.sale_price}}元</span>
            </li>
            <li class="col-2">
              <span class="del" @click="updateNum(item,index,'-')">-</span>
              <span>{{item.num}}</span>
              <span class="add" @click="updateNum(item,index,'+')">+</span>
              
            </li>
            <li class="col-1">
              <span>{{item.num * item.s_good.sale_price}}元</span>
            </li>
            <li class="col-1">
              <span class="cancel" @click="delProduct(item.id)">X</span>
            </li>
            </ul>
          </div>
          <div class="noshop" v-else>
            亲，您的购物车没有商品，赶快去<a href="/" >购物</a>吧~_~
          </div>
        </div>
        <div class="wrapper_footer">
          <div class="footer_left">
            <span>共{{list.length}}件</span>
            <span>已选{{getTatol.totalNum}}件</span>
          </div>
          <div class="footer_right"> 
            <span>合计:{{getTatol.total}}元</span>
            <span><a href="javascript:;" @click="toOrder">立即结算</a></span>
          </div>
        </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Footer from '../components/Footer'
import {Data} from '../assets/js/request'
import OrderHeader from '../components/OrderHeader'
import http from '../assets/js/http'

export default {
    components:{
      Footer,
      OrderHeader
    },
    data(){
      return {
        list:[],
      }
    },
    created(){
      this.render()
    },
    computed:{
      //全选
      isSelectAll(){
        return this.list.every(ele=>ele.isCheck);
      },
      //统计
      getTatol(){
        let goodsList = this.list.filter(ele => ele.isCheck)
        let total = 0;
        let totalNum = 0;
        for(let i=0;i<goodsList.length;i++){
          total +=  goodsList[i].num * goodsList[i]. s_good.sale_price
          totalNum += goodsList[i].num
        }
        return {totalNum,total}
      }
    },
    methods:{
      //是否选中
      changeCheck(item,index){
        item.isCheck = !item.isCheck
      },
      //是否全选
      isAll(isSelectAll){
        for (var i = 0; i < this.list.length; i++) {
          this.list[i].isCheck = !isSelectAll
        }
      },
      //商品加减
      async updateNum(item,index,type){
        let arrList = this.list
        
        if(type == '-'){
          if(arrList[index].num == 1){
              this.$message.warning("至少保留一个")
              return;
          }
          arrList[index].num--
        }
        else{
          arrList[index].num++
        }
        await http.put(`/api/shoppingCart/${arrList[index].id}`,{num:arrList[index].num})
        this.$store.dispatch('saveUserData',JSON.stringify(arrList));
      },
      //删除信息
      delProduct(id){
        http.delete(`/api/shoppingCart/${id}`)
        this.render()
      },
      //数据渲染
      async render(){
        let id = this.$route.params.project_id
        let res = await Data('get','cart',{project_id:id})
        this.list = res.map(ele => {
          ele.isCheck = false
          return ele
        })
        console.log(res);
        let arr = this.list
        sessionStorage.setItem('userData',JSON.stringify(arr));
      },
      //跳转订单确认页面
      toOrder(){
        let arr = this.list.filter(ele => ele.isCheck == true)
        // console.log(arr);
        if(this.list.every(ele => ele.isCheck == false)){
          alert('不能全为空')
        }
        else{
          sessionStorage.setItem('userData',JSON.stringify(arr));
          this.$router.push('/order')
        }
        
      }
    }
}
</script>

<style lang="scss" scoped>
.contaienr{
  background-color: #f5f5f5;
}
.col-1{
  width: 10%;
}
.col-2{
  width: 15%;
}
.col-3{
  width: 40%;
}
.checkBox{
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #f5f5f5;
  vertical-align: middle;
  cursor: pointer;
}
.checked{
  background-color: #FF6600;
  background-image: url('/img/icon-gou.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
img{
  width: 100%;
  height: 100%;
}

.wrapper{
  width: 60%;
  margin: 0 auto;
  background-color: white;
  .wrapepr_header{
    ul{
      display: flex;
      justify-content: space-around;
      text-align: center;
      line-height: 50px;
    }
  }
  .wrapper_container{
    min-height: 210px;
    ul{
      border-top: 1px solid gray;
      display: flex;
      justify-content: space-around;
      text-align: center;
      vertical-align: middle;
      line-height: 50px;
      padding: 10px 0;
      li{
        .phone{
          display: inline-block;
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }
        span{
          vertical-align: middle;
          display: inline-block;
          line-height: 50px;
        }
        .add,.del{
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          background-color:grey;
          cursor: pointer;
        }
        .cancel{
          cursor: pointer;
        }
      }
      .phone_name{
        text-align: left;
        vertical-align: middle;
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .noshop{
      text-align: center;
      font-size: 26px;
      height: 300px;
      line-height: 300px;
    }
  }
  .wrapper_footer{
    display: flex;
    justify-content: space-between;
    height: 30px;
    line-height: 30px;
    padding-bottom: 10px;
    .footer_left{
      color: grey;
      padding-left: 30px;
      span{
        margin-left: 10px;
      }
    }
    .footer_right{
      padding-right: 30px;
      span{
        margin-left: 10px;
        &:last-child{
          a{
            display: inline-block;
            width: 90px;
            height: 30px;
            background-color:  #FF6600 ;
            text-align: center;
            color: black;
          }
        }
      }
    }
  }
}
</style>